{# src/Pyaf/GymBundle/Resources/views/Recuperar/add.html.twig #}

 <link rel="stylesheet" href="{{ asset('bootstrap/css/smoothness/jquery-ui-1.10.3.custom.min.css') }}" />
 <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
{% block javascriptsHeader %}
    <script src="{{ asset('bootstrap/js/jquery-1.9.1.js') }}"></script>
    <script src="{{ asset('bootstrap/js/jquery-ui-1.10.3.custom.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(function() {
                var projects = [
                    
                    {% for alumno in alumnos %} 
                      {# {% if alumno.id != clase.alumno.id %} #}
                        {
                          value: "{{ alumno.id }}",
                          label: "{{ alumno.nombreCompleto }}",
                          desc: "{{ alumno.persona.dni }}",
                        },{# {% endif %} #}
                    {% endfor %}       
                ];

                $( "#alumno-reserva" ).autocomplete({
                  minLength: 0,
                  source: projects,
                  focus: function( event, ui ) {
                    $( "#alumno-reserva" ).val( ui.item.label );
                    return false;
                  },
                  select: function( event, ui ) {
                    $( "#alumno-reserva" ).val( ui.item.label );
                    $( "#alumno-id" ).val( ui.item.value );
                    $( "#alumno-dni" ).html( "Dni: "+ui.item.desc );

                    return false;
                  }
                })
                .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                  return $( "<li>" )
                    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                    .appendTo( ul );
                };
              });
        });
    </script>
{% endblock %}

{% block body %}
              
    <form action="{{ path('avisos_recupera_savefijo') }}" method="post" class='form-horizontal form-bordered form-validate'>                        
        
        <input type="hidden" value="{{ clase.id }}" name="id_Clase">
           
        <div class="control-group">
            <label for="textfield" class="control-label" style="text-align: center;">Día a recuperar</label>
            <div class="controls">
                <span class="uneditable-input">{{ clase.dia }}</span>
            </div>
        </div>    
        <div class="control-group">
            <label for="textfield" class="control-label" style="text-align: center;">Fecha y horario</label>
            <div class="controls">
                <input type="text" name="fechaRecupera" readonly value="{{ fecha | date('Y-m-d')}} {{ clase.horario | date('H:i:s')}}"/>
            </div>
        </div>
        <div class="control-group">
            <label for="textfield" class="control-label" style="text-align: center;">Camas disponibles</label>
            <div class="controls">
                <span class="uneditable-input">{{ clase.nroCama }}</span>
            </div>
        </div>    
        <div class="control-group">
            <label for="textfield" class="control-label" style="text-align: center;">Alumno</label>
            <div class="controls">
                <div class="input-append input-prepend">
                    <span class="add-on"><i class="icon-search"></i></span>
                    <input type="text" placeholder="Buscar alumno..." class='input-medium' id="alumno-reserva" required="true">
                        <input type="hidden" id="alumno-id" name="id_Alumno"/>
                    <span class="add-on">...</span>
                </div>
                <span class="help-block">
                   <code id="alumno-dni">Dni:...</code>
                </span>
            </div>
        </div>
        <div class="form-actions">
            <input type="submit" class="button button-basic-blue" value="Aceptar">
            <a href="{{ path('avisos_recupera_listDay') }}" class="button button-basic">Cancelar</a>
        </div>
    </form>  
           
{% endblock %}
 
